<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .strstyle{
            color: #f00;
            font-size: 20px;
            font-weight: 700;
            position: absolute;
            top: -50px;
        }

    </style>
</head>
<body>
    <h1>蛇形文字</h1>
    <hr>

    <script>
                var msg = '鹅鹅鹅，曲项用刀割.拔毛用开水,炖鹅用大锅';

        for (var i = 0; i < msg.length; i++) {
            document.write('<span id="str'+i+'" class="strstyle">');
            document.write(msg[i]);
            document.write('</span>');
        }

        // 绑定鼠标移动事件
        document.onmousemove = function (e){
            e = e || window.event;
            document.title = 'X: '+e.x+'| Y:'+e.y;

            // 让每个字之间 有时间延迟的 统一的 去行动
            // 定时器 + 循环
            var m = 0;
            var timer = setInterval(function() {
                if (m < msg.length) {
                    snake(e.x, e.y, m);// 调用文字的运动轨迹
                    m++;
                } else {
                    // 如果次数 大于或等于 字数,则清除之前的定时
                    clearInterval(timer);
                }
            }, 50)
        }

        // 设定文字的运动轨迹
        function snake(x, y, m) {
            // 获取每个span元素标签
            var span = document.getElementById('str'+m);
            // console.log(span);
            span.style.left = x + (m*20) + 'px';
            span.style.top = y + 'px';
        }


    </script>



</body>
</html>



